<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>电影类别占比饼图</title>
		<script src="js/axios.min.js"></script>
		<script src="js/echarts.min.js"></script>
	</head>
	<body>
		<div id="main" style="width: 600px;height:400px;"></div>
		<script type="text/javascript">
			// 基于准备好的dom，初始化echarts实例
			var myChart = echarts.init(document.getElementById('main'));
			// 绘制图表
			option = {
			  tooltip: {
			    trigger: 'item'
			  },
			  legend: {
			    top: '5%',
			    left: 'center'
			  },
			  series: [
			    {
			      name: '总数',
			      type: 'pie',
			      radius: ['40%', '70%'],
			      avoidLabelOverlap: false,
			      itemStyle: {
			        borderRadius: 10,
			        borderColor: '#fff',
			        borderWidth: 2
			      },
			      label: {
			        show: false,
			        position: 'center'
			      },
			      emphasis: {
			        label: {
			          show: true,
			          fontSize: 40,
			          fontWeight: 'bold'
			        }
			      },
			      labelLine: {
			        show: false
			      },
			      data: [
			        { value: 1048, name: 'Search Engine' },
			        { value: 735, name: 'Direct' },
			        { value: 580, name: 'Email' },
			        { value: 484, name: 'Union Ads' },
			        { value: 300, name: 'Video Ads' }
			      ]
			    }
			  ]
			};
			myChart.setOption(option);
			axios.get("http://localhost:9090/leixingtongji").then(function (res) {
				option = {
				  series: [
				    {
				      data: res.data.result,
				    }
				  ]
				};
				myChart.setOption(option);
			} )
		</script>
	</body>
</html>